body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background: #f5ce51;
    color: #fff;
    perspective: 350px;
}

.parasol {
    position: absolute;
    top: 8%;
    left: 13%;
    transform-style: preserve-3d;
    transform: rotateX(70deg) rotateY(-15deg);

    .shadowPole {
        position: absolute;
        z-index: -1;
        width: 6px;
        height: 50px;
        top: 100px;
        left: 97px;
        background: #ab9038;
        transform-origin: 50% 0%;
        transform: translateZ(-150px) rotateZ(-105deg);
        box-shadow: 0 0 2px 1px #ab9038;
        border-radius: 2px;
    }

    .pole {
        position: absolute;
        z-index: 2;
        width: 6px;
        height: 150px;
        top: 100px;
        left: 97px;
        background: #888;
        transform-origin: 50% 0%;
        transform: translateZ(-1px) rotateX(-90deg);
        border-radius: 2px;
    }

    .shadowTop {
        position: absolute;
        z-index: -1;
        width: 200px;
        height: 200px;
        top: 0;
        left: 0;
        border-radius: 50%;
        transform: translateZ(-150px) translateX(120px) translateY(-40px)
            scale(0.9);
        animation: rotateTopShadow 5s linear infinite;

        .triangle {
            position: absolute;
            top: 100px;
            left: 77px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 25px 98px 25px;
            border-color: transparent transparent #ab9038 transparent;
            transform-origin: 50% 0%;
            box-shadow: 0 0 4px 2px #ab9038;

            --degree: calc(30deg * var(--i));
            transform: rotateZ(var(--degree)) rotateX(-24deg) translateY(-1px);
        }
    }

    .top {
        position: relative;
        z-index: 3;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        animation: rotateTop 5s linear infinite;

        .triangle {
            position: absolute;
            top: 100px;
            left: 77px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 24px 98px 24px;
            border-color: transparent transparent #fff transparent;
            transform-origin: 50% 0%;

            --degree: calc(30deg * var(--i));
            transform: rotateZ(var(--degree)) rotateX(-24deg);

            &:nth-child(odd) {
                border-color: transparent transparent #d70606 transparent;
            }
        }
    }
}

@keyframes rotateTop {
    from {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes rotateTopShadow {
    from {
        transform: translateZ(-150px) translateX(120px) translateY(-40px)
            scale(0.9) rotateZ(0deg);
    }
    to {
        transform: translateZ(-150px) translateX(120px) translateY(-40px)
            scale(0.9) rotateZ(360deg);
    }
}
